<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>内外边距</title>

    <style>
      .box1 {
        width: 200px;
        height: 100px;
        background-color: pink;
        /* margin-left: 100px; */
        /* margin-bottom: 100px; */
        /* margin:
          1个值：4 周
          2 个值：上下 左右(auto居中)
          3 个值：上 左右(auto居中) 下
          4 个值：上 右 下 左(顺时针)
        */
        /* margin: 100px; */
        /* margin: 50px 100px; */
        /* margin: 50px auto; */
        /* margin: 10px auto 100px; */
        /* margin: 10px 20px 30px 40px; */
      }
      .box2 {
        width: 200px;
        height: 100px;
        background-color: orange;
        /* padding，border 都会撑开盒子
          默认情况下盒子的尺寸是，宽高+padding+边框
        */
        /* padding-left: 50px; */
        /* padding-top: 50px; */

        /* 
          1个值：4 周
          2 个值：上下 左右(auto居中)
          3 个值：上 左右(auto居中) 下
          4 个值：上 右 下 左(顺时针)
        */
        /* padding: 10px 20px; */
        /* padding: 10px 20px 30px; */
        padding: 10px 20px 30px 40px;

        /* box-sizing 设置盒模型
           border-box:保证尺寸（推荐）
          content-box:保证内容大小，padding，border 撑开
        */
        box-sizing: border-box;
        /* box-sizing: content-box; */
      }
      .box3 {
        width: 200px;
        height: 100px;
        background-color: yellowgreen;
        /* 宽度 */
        border-width: 10px;
        /* 颜色 */
        /* border-color: yellow; */
        /* 类型 solid实线， dashed虚线 */
        /* border-style: solid; */
        /* border-style: dashed; */
        /* 指定的设置 某个方向的颜色 宽度 */
        /* border-right-width: 20px; */
        /* border-right-color: red; */

        /* 复合写法
          依次设置 宽度 颜色 类型即可
        */
        border: 10px red solid;
        /* 设置 padding border 不会撑开 */
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div class="box1">盒子 1</div>
    <div class="box2">盒子 2</div>
    <div class="box3">盒子 3</div>
  </body>
</html>
